<template>
  <van-popup v-model="blank" position="bottom">
    <div>
      <div class="van-picker__toolbar">
        <button type="button" class="van-picker__cancel" @click="onCancel">取消</button>
        <button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
      </div>
      <top-search v-model="search" bgcolor="#fff" @search="getList"></top-search>
      <div style="height: 2vh;"></div>
      <div style="height: 40vh; overflow: auto;">
        <radio-item v-for="item in list" :key="item.userId" :label="`${ item.nick }(${ item.userId })`" :tag="item.userType == 1 ? '微信' : '支付宝'" 
          :check="sele.userId == item.userId" @click.native="sele = item"></radio-item>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      search: "",
      list: [],
      sele: {}
    };
  },
  methods: {
    getList() {
      this.$store.commit('loading', true);
      if (isNaN(this.search)) {
        this.$toast('请输入用户id');
        return ;
      }
      this.$axios.get('/api/user/wxAndZfbUser', { 
        userId: this.search
      }).then(res => {
        this.$store.commit('loading');
        if (res) {
          this.list = [ res ];
        } else {
          this.list = [];
        }
      });
    },
    onConfirm() {
      if (this.sele.userId) {
        this.blank = false;
        this.$emit('submit', this.sele);
      } else {
        this.$toast('请选择人员');
      }
    },
    onCancel() {
      this.blank = false;
    }
  },
  computed: {
    blank: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  mounted() {
  }
};
</script>
